import React, { useEffect, useRef, useState } from "react";
import style from "./style.module.css";
import Navbar from "../../../../components/Navbar/Index";
import { SearchBarRef } from "antd-mobile/es/components/search-bar";
import HouseList from '../../../../components/houseList/Index'
import Paragraph from "../../../../components/Paragraph/Index";
import { SearchBar, Swiper } from "antd-mobile";
import { Grid } from "antd-mobile";
import img1 from "../../../../static/nav_icon/会员数据.png";
import img2 from "../../../../static/nav_icon/商铺.png";
import img3 from "../../../../static/nav_icon/日志记录.png";
import img4 from "../../../../static/nav_icon/流水查询.png";
import img5 from "../../../../static/nav_icon/流程管理.png";
import img6 from "../../../../static/nav_icon/表单模版.png";
import img7 from "../../../../static/nav_icon/财务付款管理.png";
import img8 from "../../../../static/nav_icon/进度.png";
import img9 from "../../../../static/nav_icon/采购付款管理.png";
import img10 from "../../../../static/nav_icon/项目.png";
import header from "../../../../img/header.png";
import photo1 from "../../../../img/1.png";
import photo2 from "../../../../img/2.png";
import photo3 from "../../../../img/3.png";
import photo4 from "../../../../img/4.png";
import { throttle } from "lodash";
import axios from "axios";
import { Chat } from "@react-vant/icons";
import houseList from '../../../../components/houseList/Index'
import { useNavigate } from "react-router-dom";

import { Sticky, Button } from "react-vant";
import { useDispatch, useSelector } from "react-redux";
import { pushList } from "../../../../store/reducer/aa";

function HomeView({ }) {
  const searchRef = useRef(null);
  const homeRef = useRef(null);
  const [flex_falg, setFlexFlag] = useState(false);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const container = useRef(null);

  //热门楼盘 二手房数据渲染
  useEffect(() => {
    axios.get("/api/list").then((res) => {
      console.log(res.data);
      if (res.status === 200) {
        // console.log(res.data.list,'标记');
        dispatch(pushList(res.data.list));
      }
    });
  }, []);

  const list = useSelector((state) => {
    console.log(state);
    return state.newHouserSlice.new_house_list;
  });

  const banner_url = [
    "https://picnew12.photophoto.cn/20180531/xiaoqingxinxiajicuxiaoshouyelunbohaibao-30666930_1.jpg",
    "https://photo.16pic.com/00/51/89/16pic_5189872_b.jpg",
    "https://img.zcool.cn/community/01a378589d6018a8012060c8bbfd18.jpg@2o.jpg",
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F07%2F20161007135506_wFcZG.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690505592&t=e7999a838c6bc06b927d3e84e7e2600a",
  ];

  const cloums = [
    {
      img: img1,
      path: "/index/home/new_house",
      title: "新房",
    },
    {
      img: img2,
      path: "/index/home/old_house",
      title: "二手房",
    },
    {
      img: img3,
      path: "/index/home/rent_out_house",
      title: "租房",
    },
    {
      img: img4,
      path: "/",
      title: "求购",
    },
    {
      img: img5,
      path: "/",
      title: "求租",
    },
    {
      img: img6,
      path: "/",
      title: "咨询",
    },
    {
      img: img7,
      path: "/",
      title: "楼市圈",
    },
    {
      img: img8,
      path: "/",
      title: "经纪人",
    },
    {
      img: img9,
      path: "/",
      title: "团购看房",
    },
    {
      img: img10,
      path: "/",
      title: "地图找房",
      path: "/index/home/map_find_house",
    },
  ];
  useEffect(() => {
    let homeDom = homeRef.current;
  }, []);
  const homeScroll = () => {
    let scroll_top = homeRef.current.scrollTop;
    if (scroll_top <= 56) {
      setFlexFlag(false);
    }
    if (scroll_top > 56) {
      setFlexFlag(true);
    }
  };

  return (
    <div
      className={style["home-wapper"]}
      ref={homeRef}
      onScroll={throttle(homeScroll, 100)}
    >
      <div>
        {/* 顶部电量 时间展示图片 */}
        <Sticky>
          <img
            src={header}
            alt=""
            style={{ width: "100%", height: "100%", marginBottom: "-5px" }}
          />
        </Sticky>

        <Navbar
          nav_left={
            <div
              style={{
                fontSize: "18px",
                marginLeft: "15px",
              }}
            >
              宏烨找房
            </div>
          }
          nav_footer={
            <div className={style["search-wapper"]}>
              <SearchBar
                ref={searchRef}
                placeholder="请输入内容"
                onSearch={(val) => {
                  console.log("val", val);
                }}
                style={{
                  "--background": "rgba(255,255,255,0.6)",
                  "--height": "30px",
                  "--placeholder-color": "#fff",
                }}
              />
            </div>
          }
          flex_falg={flex_falg}
        />

        {/* 轮播图 */}
        <div className={style["swiper-wapper"]}>
          <Swiper
            loop
            indicatorProps={{
              color: "white",
            }}
          >
            {banner_url.map((item, index) => {
              return (
                <Swiper.Item key={index}>
                  <div className={style["banner_content"]}>
                    <img src={item} alt="" />
                  </div>
                </Swiper.Item>
              );
            })}
          </Swiper>
        </div>
        <div className="grod_wapper">
          <Grid columns={5} gap={10}>
            {cloums.map((item, index) => {
              return (
                <Grid.Item key={index}>
                  <div
                    className={style["nav-item-block"]}
                    onClick={() => {
                      navigate(item.path);
                    }}
                  >
                    <div>
                      <img src={item.img} alt="" />
                    </div>
                    <div>{item.title}</div>
                  </div>
                </Grid.Item>
              );
            })}
          </Grid>
        </div>
        {/* 楼市咨询页面排版 */}
        <div className={style["banner_wapper"]}>
          <Paragraph
            nav_left={<h3 style={{ lineHeight: "30px" }}>楼市咨询</h3>}
            nav_right={<div>更多</div>}
            container={
              <div className={style["banner_container"]}>
                {
                  [1, 2, 3, 4].map(item => {
                    return <div style={{ display: "flex", paddingTop: "15px" }} key={item}>
                      <div>
                        <button
                          style={{
                            background:
                              "linear-gradient(135deg,#fff 10%,#F88D8F 90%)",
                            color: "#fff",
                            border: "none",
                            width: "50px",
                            height: "20px",
                            margin: "5px",
                          }}
                        >
                          TOP{item}
                        </button>
                      </div>
                      <div style={{ margin: "5px" }}>
                        心悦尚城新房正在抢购,新老客户限时回馈!
                      </div>
                    </div>
                  })
                }

              </div>
            }
          />
        </div>
        {/* 热门楼盘排版 */}
        <div className={style["hot_wapper"]}>
          <Paragraph
            nav_left={<h3 style={{ lineHeight: "30px" }}>热门楼盘</h3>}
            nav_right={<div>更多</div>}
            container={
              <div>
                {list && list.length > 0
                  ? <HouseList houseList={list.slice(0, 5)} />
                  : "暂无数据"}
              </div>
            }
          />
        </div>

        <div className={style["hot_wapper"]}>
          <Paragraph
            nav_left={<h3 style={{ lineHeight: "30px" }}>经纪人</h3>}
            nav_right={<div>更多</div>}
            container={
              <div className={style["scroll-container"]}>
                <div className={style["scroll-container-box"]}>
                  <div
                    className={style["scroll-container-box-item"]}
                    style={{ float: "left" }}
                  >
                    <div
                      style={{
                        border: "2px solid #f2f2f2",
                        borderRadius: "5px",
                        boxShadow: "0 0 10px 0 #f2f2f2",
                        width: "100px",
                        height: "150px",
                        margin: "10px",
                      }}
                    >
                      <img
                        src={photo3}
                        alt=""
                        style={{
                          width: "50px",
                          height: "50px",
                          borderRadius: "50%",
                          marginLeft: "25px",
                          marginTop: "10px",
                        }}
                      />
                      <h3 style={{ marginLeft: "20px", fontSize: "15px" }}>
                        建发曹颖
                      </h3>
                      <p
                        style={{
                          color: "#999",
                          fontSize: "11px",
                          marginLeft: "20px",
                        }}
                      >
                        建发 文翰府
                      </p>
                      <button
                        style={{
                          background: "linear-gradient(90deg,#FA636C,#FFAA67)",
                          width: "70px",
                          height: "20px",
                          borderRadius: "20px",
                          border: "none",
                          marginTop: "15px",
                          marginLeft: "20px",
                          color: "#fff",
                        }}
                      >
                        <Chat style={{ marginRight: "5px" }} />
                        咨询
                      </button>
                    </div>
                  </div>
                  <div
                    className={style["scroll-container-box-item"]}
                    style={{ float: "left" }}
                  >
                    <div
                      style={{
                        border: "2px solid #f2f2f2",
                        borderRadius: "5px",
                        boxShadow: "0 0 10px 0 #f2f2f2",
                        width: "100px",
                        height: "150px",
                        margin: "10px",
                      }}
                    >
                      <img
                        src={photo1}
                        alt=""
                        style={{
                          width: "50px",
                          height: "50px",
                          borderRadius: "50%",
                          marginLeft: "25px",
                          marginTop: "10px",
                        }}
                      />
                      <h3 style={{ marginLeft: "20px", fontSize: "15px" }}>
                        建发曹颖
                      </h3>
                      <p
                        style={{
                          color: "#999",
                          fontSize: "11px",
                          marginLeft: "20px",
                        }}
                      >
                        建发 文翰府
                      </p>
                      <button
                        style={{
                          background: "linear-gradient(90deg,#FA636C,#FFAA67)",
                          width: "70px",
                          height: "20px",
                          borderRadius: "20px",
                          border: "none",
                          marginTop: "15px",
                          marginLeft: "20px",
                          color: "#fff",
                        }}
                      >
                        <Chat style={{ marginRight: "5px" }} />
                        咨询
                      </button>
                    </div>
                  </div>
                  <div
                    className={style["scroll-container-box-item"]}
                    style={{ float: "left" }}
                  >
                    <div
                      style={{
                        border: "2px solid #f2f2f2",
                        borderRadius: "5px",
                        boxShadow: "0 0 10px 0 #f2f2f2",
                        width: "100px",
                        height: "150px",
                        margin: "10px",
                      }}
                    >
                      <img
                        src={photo2}
                        alt=""
                        style={{
                          width: "50px",
                          height: "50px",
                          borderRadius: "50%",
                          marginLeft: "25px",
                          marginTop: "10px",
                        }}
                      />
                      <h3 style={{ marginLeft: "20px", fontSize: "15px" }}>
                        建发曹颖
                      </h3>
                      <p
                        style={{
                          color: "#999",
                          fontSize: "11px",
                          marginLeft: "20px",
                        }}
                      >
                        建发 文翰府
                      </p>
                      <button
                        style={{
                          background: "linear-gradient(90deg,#FA636C,#FFAA67)",
                          width: "70px",
                          height: "20px",
                          borderRadius: "20px",
                          border: "none",
                          marginTop: "15px",
                          marginLeft: "20px",
                          color: "#fff",
                        }}
                      >
                        <Chat style={{ marginRight: "5px" }} />
                        咨询
                      </button>
                    </div>
                  </div>
                  <div
                    className={style["scroll-container-box-item"]}
                    style={{ float: "left" }}
                  >
                    <div
                      style={{
                        border: "2px solid #f2f2f2",
                        borderRadius: "5px",
                        boxShadow: "0 0 10px 0 #f2f2f2",
                        width: "100px",
                        height: "150px",
                        margin: "10px",
                      }}
                    >
                      <img
                        src={photo4}
                        alt=""
                        style={{
                          width: "50px",
                          height: "50px",
                          borderRadius: "50%",
                          marginLeft: "25px",
                          marginTop: "10px",
                        }}
                      />
                      <h3 style={{ marginLeft: "20px", fontSize: "15px" }}>
                        建发曹颖
                      </h3>
                      <p
                        style={{
                          color: "#999",
                          fontSize: "11px",
                          marginLeft: "20px",
                        }}
                      >
                        建发 文翰府
                      </p>
                      <button
                        style={{
                          background: "linear-gradient(90deg,#FA636C,#FFAA67)",
                          width: "70px",
                          height: "20px",
                          borderRadius: "20px",
                          border: "none",
                          marginTop: "15px",
                          marginLeft: "20px",
                          color: "#fff",
                        }}
                      >
                        <Chat style={{ marginRight: "5px" }} />
                        咨询
                      </button>
                    </div>
                  </div>
                  <div
                    className={style["scroll-container-box-item"]}
                    style={{ float: "left" }}
                  >
                    <div
                      style={{
                        border: "2px solid #f2f2f2",
                        borderRadius: "5px",
                        boxShadow: "0 0 10px 0 #f2f2f2",
                        width: "100px",
                        height: "150px",
                        margin: "10px",
                      }}
                    >
                      <img
                        src={photo3}
                        alt=""
                        style={{
                          width: "50px",
                          height: "50px",
                          borderRadius: "50%",
                          marginLeft: "25px",
                          marginTop: "10px",
                        }}
                      />
                      <h3 style={{ marginLeft: "20px", fontSize: "15px" }}>
                        建发曹颖
                      </h3>
                      <p
                        style={{
                          color: "#999",
                          fontSize: "11px",
                          marginLeft: "20px",
                        }}
                      >
                        建发 文翰府
                      </p>
                      <button
                        style={{
                          background: "linear-gradient(90deg,#FA636C,#FFAA67)",
                          width: "70px",
                          height: "20px",
                          borderRadius: "20px",
                          border: "none",
                          marginTop: "15px",
                          marginLeft: "20px",
                          color: "#fff",
                        }}
                      >
                        <Chat style={{ marginRight: "5px" }} />
                        咨询
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            }
          />
        </div>
        <div
          style={{
            margin: "0 15px",
            overflow: "hidden",
            height: "100px",
          }}
        >
          <img
            src="https://img.zcool.cn/community/01a378589d6018a8012060c8bbfd18.jpg@2o.jpg"
            alt=""
            style={{ width: "100%", height: "100%" }}
          />
        </div>
        <div className={style["hot_wapper"]}>
          <Paragraph
            nav_left={<h3 style={{ lineHeight: "30px" }}>二手房</h3>}
            nav_right={<div>更多</div>}
            container={
              list && list.length > 0
                ? <HouseList houseList={list.slice(0, 5)} />
                : "暂无数据"
            }
          />
        </div>
      </div>
    </div>
  );
}

export default HomeView;
